<template>
  <div class="home">
    <div class="page-title">学生管理</div>
    <div class="content">
      <el-form :inline="true" ref="searchForm" class="demo-form-inline" :model="fromData">
        <el-form-item label="学员状态" prop="status">
          <el-select placeholder="请选择" v-model="fromData.status">
            <el-option label="请选择" :value="-1"></el-option>
            <el-option label="启用" :value="1"></el-option>
            <el-option label="禁用" :value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="学生名称" prop="nickname">
          <el-input placeholder="请输入学生关键字" v-model="fromData.nickname"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="mobile">
          <el-input placeholder="请输入手机号" v-model="fromData.mobile"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button plain @click="search">搜索</el-button>
          <el-button plain @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
      <div class="table-box">
        <el-button type="primary">新增学员</el-button>
        <el-button type="primary">批量导入</el-button>
        <el-button type="primary">批量导出</el-button>
        <el-button type="primary">查看报表</el-button>
        <el-table class="table"
          :data="tableData"
          border
          style="width: 100%">
          <el-table-column
            type="selection"
            width="55">
          </el-table-column>
          <el-table-column
            prop="nickname"
            label="学生名称">
          </el-table-column>
          <el-table-column
            prop="mobile"
            label="手机号">
          </el-table-column>
          <el-table-column
            prop="status"
            label="状态">
             <template slot-scope="scope">
              {{scope.row.status === 1 ? '启用' : '禁用'}}
            </template>
          </el-table-column>
          <el-table-column
            prop="created_at"
            label="创建时间">
            <template slot-scope="scope">
              {{scope.row.created_at | formate}}
            </template>
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作">
            <template slot-scope="scope">
              <el-button type="text" size="small">查看</el-button>
              <el-button type="text" size="small">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-pagination
        :page-sizes="[3, 10, 20]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        :current-page="pagenum"
        :page-size="pagesize"
        @size-change="sizeChange"
        @current-change="currentChange"
        >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import { totalmem } from 'os';
export default {
  name: 'Home',
  data() {
    return {
      tableData: [],
      fromData: {
        status: null,
        nickname: '',
        mobile: ''
      },
      cpTableData: [],
      pagenum: 1,
      pagesize: 10,
      total: 0,
      isAfterSearch: false,
      searchData: []
    }
  },
  filters:{
    formate(val) {
      let data = new Date()
      let year = data.getFullYear()
      let m = data.getMonth() + 1
      let d = data.getDate()
      return `${year}-${m}-${d}`
    }
  },

  created() {
    this.getList()
  },

  methods: {
    sunPage() {
      if(!this.isAfterSearch) {
        this.tableData = JSON.parse(JSON.stringify(this.cpTableData))
      }
      this.tableData = this.tableData.splice((this.pagenum - 1)*this.pagesize, this.pagesize)
    },

    async getList() {
      let { data } = await axios.get('/list.json')
      this.total = data.length
      this.tableData = data
      this.cpTableData = JSON.parse(JSON.stringify(this.tableData))
      this.sunPage()
    },

    sizeChange(val) {
      this.pagesize = val
      this.sunPage()
    },

    currentChange(val) {
      this.pagenum = val
      let arr = JSON.parse(this.searchData)
      this.tableData = arr.splice((this.pagenum - 1)*this.pagesize, this.pagesize)
    },

    search() {
      let arr = JSON.parse(JSON.stringify(this.cpTableData))
      this.isAfterSearch = true
      if(this.fromData.status === null && this.fromData.nickname === '' && this.fromData.mobile === '') return
      this.tableData = arr.filter(item => {
        return (
          item.status === this.fromData.status &&
          item.nickname.includes(this.fromData.nickname)
          && item.mobile.includes(this.fromData.mobile)
        )
      })
      this.searchData = JSON.stringify(this.tableData)
      this.total = this.tableData.length
      this.sunPage()
    },

    // 重置
    reset() {
      // this.fromData = {
      //   status: null,
      //   mobile: '',
      //   nickname: ''
      // }
      // console.log(this.$refs);
      this.$refs['searchForm'].resetFields();
      this.getList()
    }
  }
}
</script>
<style lang="scss" scoped>
  .page-title {
    width: 100%;
    height: 40px;
    border-bottom: 1px solid #ccc;
    line-height: 40px;
    padding-left: 20px;
    font-weight: bold;
  }
  .content {
    padding: 10px;
  }
  .table {
    margin-top: 20px;
  }
  .table-box {
    margin-bottom: 20px;
  }
</style>

